<template>
	<view>
		<u-sticky bgColor="#fff">
			<view class="help-pubuBox">
				<u-search :placeholder="current==0?'搜索设备名称或编号':'搜索备件名称或编号'" :clearabled="true" v-model="title" @change="change" @search="chaxun"
					@custom="chaxun"height="40" shape="square" color="#2B2B2B" actionText="搜索" :actionStyle="actionStyle"></u-search>
			</view>
		</u-sticky>
		<view class="bj-list" v-if="current==1">
			<view class="bj-item" v-for="(item,index) in warehouseList" :key="index">
				<view class="title">{{item.partNum}}{{item.partName}}</view>
				<view class="main-content">
					<view class="left-icon">
						<image v-if="item.picture" :src="item.picture"></image>
						<image style="width:136rpx;height: 136rpx;" v-if="!item.picture"
							src="../../../static/images/index/weibaorenwu.png" mode=""></image>
					</view>
					<view class="right-txt">
						<view class="txt-content">
							<view class="left">设备类型：</view>
							<view class="right">{{item.partTypeName}}</view>
						</view>
						<view class="txt-content">
							<view class="left">保质期：</view>
							<view class="right">{{item.qualityPeriod}}{{item.qualityUnit}}</view>
						</view>
						<view class="txt-content">
							<view class="left">实际库存：</view>
							<view class="right">{{item.realStock}}</view>
						</view>
						<view class="txt-content">
							<view class="left">可用库存：</view>
							<view class="right">{{item.availableStock}}</view>
						</view>
						<view class="txt-content">
							<view class="left">备件库：</view>
							<view class="right">{{item.storehouseName}}</view>
						</view>

					</view>
				</view>
				<view class="item-btn" v-if="item.availableStock>0">
					<view class="chuku" @click="togoChukuChange(item)">出库</view>
					<view class="su-line"></view>
					<view class="ruku" @click="togoRukuChange(item)">入库</view>
				</view>
				<view class="item-btn" v-if="item.availableStock==0">
					<view class="ruku" @click="togoRukuChange(item)">入库</view>
				</view>
			</view>
			<view class="empty-data" v-if="warehouseList.length==0">
				<u-empty mode="data" :marginTop="100" text="暂无数据"></u-empty>
			</view>
		</view>

		<view class="bj-list" v-if="current==0">
			<view class="bj-item" v-for="(item,index) in useList" :key="index" @click="togoItemList(item)">
				<view class="title">{{item.deviceNum}}{{item.deviceName}}</view>
				<view class="main-content">
					<view class="left-icon">
						<image v-if="item.devicePicture" :src="item.devicePicture"></image>
						<image style="width:136rpx;height: 136rpx;" v-if="!item.devicePicture"
							src="../../../static/images/index/weibaorenwu.png" mode=""></image>
					</view>
					<view class="right-txt">
						<view class="txt-content">
							<view class="left">设备类型：</view>
							<view class="right">{{item.deviceTypeName}}</view>
						</view>
						<view class="txt-content">
							<view class="left">设备型号：</view>
							<view class="right">{{item.modelName}}</view>
						</view>
						<view class="txt-content">
							<view class="left">所在部门：</view>
							<view class="right">{{item.deptName}}</view>
						</view>
						<view class="txt-content">
							<view class="left">关联备件数量：</view>
							<view class="right">{{item.totalAmount}}</view>
						</view>
						<view class="txt-content">
							<view class="left">关联总价值：</view>
							<view class="right">{{item.totalMoney}}</view>
						</view>

					</view>
				</view>
			</view>
			<view class="empty-data" v-if="useList.length==0">
				<u-empty mode="data" :marginTop="100" text="暂无数据"></u-empty>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				current: '',
				warehouseList: '', //备件仓库的列表
				warehouseParams: {
					pn: 1,
					ps: 1000,
					keyword: '',
				},
				useList: [], //备件设备使用情况的列表
				useParams: {
					pn: 1,
					ps: 1000,
					keyword: '',
				},
				actionStyle: {
					color: '#fff',
					background: '#0F53AC',
					padding: '10rpx',
					borderRadius: '8rpx'
				},
			}
		},
		onLoad(option) {
			if (option) {
				this.current = option.current
				console.log(option, 'option<====')
			}
		},
		onShow() {

		},
		methods: {
			change() {

			},
			clear() {
				this.title = ""
			},
			chaxun(e) {
				if (this.current == 1) {
					this.warehouseParams.keyword = e
					this.getWarehouseList()
				}
				if (this.current == 0) {
					this.useParams.keyword = e
					this.getUserList()
				}
			},
			getWarehouseList() {
				uni.$u.http.post(`/device/mobile/devicePart/pageList`, this.warehouseParams).then(res => {
					if (res.code == 0) {
						if (res.data.records && res.data.records.length >= 0) {
							this.warehouseList = res.data.records
							if(res.data.records.length == 0){
								uni.$u.toast('暂无数据')
							}
						} else {
							uni.$u.toast('暂无数据')
						}
					}
				}).catch(err => {
					uni.$u.toast(`${err.error}`)
				})
			},
			//入库
			togoRukuChange(item) {
				uni.navigateTo({
					url: '/pages/subPackagesB/stockList/ruku?items=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			//出库
			togoChukuChange(item) {
				uni.navigateTo({
					url: '/pages/subPackagesB/stockList/chuku?items=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			getUserList() {
				uni.$u.http.post(`/device/mobile/deviceInfo/getDevicePartUseInfo`, this.useParams).then(res => {
					if (res.code == 0) {
						if (res.data.records && res.data.records.length >= 0) {
							this.useList = res.data.records
							if(res.data.records.length == 0){
								uni.$u.toast('暂无数据')
							}
						} else {
							uni.$u.toast('暂无数据')
						}
					}
				}).catch(err => {
					uni.$u.toast(`${err.error}`)
				})
			},
			togoItemList(item) {
				uni.navigateTo({
					url: '/pages/subPackagesB/bjuserList/index?items=' + encodeURIComponent(JSON.stringify(item))
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #ffffff;
	}

	.help-pubuBox {
		padding: 22rpx;
		background: #fff;
	}

	.search-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: #8c8c8c;
		padding: 20rpx 30rpx;
	}

	.search-list {
		background: #fff;
		margin-top: 2rpx;


		.search-item {
			padding: 30rpx;
			border-bottom: 1px solid #f2f2f2;

			.item-top {
				display: flex;
				align-items: center;


				.unselect-bg {
					margin-right: 20rpx;
					color: #f1f1f1;
					font-size: 48rpx;
				}

				.select-bg {
					margin-right: 20rpx;
					color: #0F53AC;
					font-size: 48rpx;
				}

				.item-name {
					color: #000000;
					font-size: 34rpx;
				}

				.item-txt {
					padding: 20rpx 0 20rpx 10rpx;
					display: flex;
					width: 100%;

					.left-icon {
						border-radius: 8rpx;

						image {
							width: 152rpx;
							height: 152rpx;
							border-radius: 8rpx;
						}
					}

					.right-txt {
						padding-left: 32rpx;
						width: 100%;

						.txt1 {
							width: 440rpx;
							height: 75rpx;
							font-size: 34rpx;
							color: #000000;
							padding-bottom: 20rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}

						.txt-right {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding-top: 10rpx;

							.txt2 {
								font-size: 28rpx;
								color: #8c8c8c;
							}

							.addnum {
								.minus {
									color: #0F53AC;
									font-size: 34rpx;
								}

								.plus {
									color: #0F53AC;
									font-size: 34rpx;
								}

								.notselect-bg {
									color: #c4c4c4;
									font-size: 34rpx;
								}
							}
						}
					}
				}

			}


		}
	}

	.clear-bottom {
		width: 100%;
		height: 120rpx;
	}

	.btn-bottom {
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		background: #fff;

		.btn-left {
			margin-left: 30rpx;
			font-size: 28rpx;
			color: #000000;
		}

		.btn-right {
			margin-right: 30rpx;
			font-size: 34rpx;
			color: #ffffff;
			background: #0F53AC;
			border-radius: 12rpx;
			padding: 20rpx 60rpx;
		}

	}

	.bj-list {
		margin-top: 2rpx;
		background: #f2f2f2;

		.bj-item {
			background: #fff;
			padding: 20rpx;
			margin: 10rpx 0;

			.title {
				font-size: 34rpx;
				color: #000000;
			}

			.main-content {
				display: flex;
				margin-top: 10rpx;

				.left-icon {
					image {
						width: 136rpx;
						height: 136rpx;
						border-radius: 8rpx;
					}
				}

				.right-txt {
					padding-left: 32rpx;

					.txt-content {
						display: flex;
						color: #8c8c8c;
						font-size: 28rpx;
						margin-bottom: 10rpx;
						align-items: center;

						.right {
							color: #000000;
							padding-left: 4rpx;
						}
					}
				}
			}

			.item-btn {
				border-top: 1px solid #f2f2f2;
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 20rpx 0;
				margin-top: 20rpx;

				.chuku {
					width: 45%;
					font-size: 34rpx;
					color: #8c8c8c;
					text-align: center;
				}

				.ruku {
					width: 45%;
					font-size: 34rpx;
					color: #0F53AC;
					text-align: center;
				}

				.su-line {
					width: 4rpx;
					height: 50rpx;
					background: #f2f2f2;
				}
			}
		}

		.bj-item:first-child {
			margin-top: 0;
		}

		.dropdown {
			.list2 {
				background: #fff;

				.sort {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: #000000;
					padding: 20rpx 0;
				}
			}

			.sort-list {
				width: 100%;
				height: 200vh;
				background: #9d9d9d;
				position: absolute;
				z-index: 22;

				.sort-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 10rpx 40rpx 10rpx 20rpx;
					font-size: 34rpx;
					border-bottom: 1px solid #f2f2f2;
					z-index: 99;
					position: relative;
					background: #fff;
				}

				.sort-item:last-child {
					border-bottom: none;
				}

				.sort-item:first-child {
					border-top: 1px solid #f2f2f2;
				}
			}
		}
	}
</style>